<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>添加到购物车成功</title>

    <script src="js/jquery-3.3.1.js"></script>

    <script src="js/include.js"></script>

    <script src="js/vue.js"></script>
    <script src="js/axios-0.19.0.js"></script>
    <script src="js/getParameter.js"></script>

</head>
<body>
<div id="header"></div>
<div class="container" id="cart">
    <div style="margin: 20px auto 0;">
        <div style="font-weight: bold;font-size: 15px;margin-bottom: 10px">添加到购物车成功...</div>
        <table class="table">
            <tbody>
            <tr bgcolor="#f5f5f5" class="table-bordered">
                <th>图片</th>
                <th>商品</th>
                <th>价格</th>
                <th>数量</th>
                <th>小计</th>
            </tr>
            <tr class="table-bordered">
                <td>
                    <img :src="cartItem.route.rimage" width="170" height="100">
                </td>
                <td width="45%">
                    <a target="_blank" href="#">{{cartItem.route.rname}}</a>
                </td>
                <td width="10%">
                    ￥{{cartItem.route.price}}
                </td>
                <td width="14%">
                    ×{{cartItem.num}}
                </td>
                <td width="15%">
                    <span style="color:red; font-weight: bolder">￥{{cartItem.subTotal}}</span>
                </td>
            </tr >

            </tbody>
        </table>
    </div>
</div>
<!--引入尾部-->
<div id="footer"></div>
<script type="text/javascript">
    new Vue({
            el:"#cart",
            data:{
                rid:1,
                num:1,
                cartItem:{} //用于添加成功的商品购物项信息
            },
            methods:{
                addCart(){
                    axios.post("cart/addCart",`rid=${this.rid}&num=${this.num}`)
                         .then(response => {
                            let resultInfo = response.data;
                            //判断添加购物车是否成功
                            if(resultInfo.success){
                                //添加购物车成功，显示当前添加成功的商品购买信息
                                this.cartItem =resultInfo.data;
                            }else{
                                //没有登录，跳转到登录页面
                                alert("您还没有登录，请先登录");
                                location.href = "login.html";
                            }
                          })
                          .catch(error=>{
                              console.log(error)
                              alert("服务器忙...");
                          });
                }
            },
            created(){
                this.rid = getParameter("rid");
                this.num = getParameter("num");
                this.addCart();
            }
        })
</script>
</body>
</html>
